<template>
  <div @dragstart="dragStart">
    <div class="card">
      <h4>基础用法</h4>
      <div class="content">
        <Input size="default" placeholder="Enter something..." />
      </div>
    </div>
    <div class="card">
      <h4>尺寸</h4>
      <div class="content">
        <Input size="large" placeholder="large size" />
        <br />
        <Input placeholder="default size" />
        <br />
        <Input size="small" placeholder="small size" />
      </div>
    </div>
    <div class="card">
      <h4>可清空</h4>
      <div class="content">
        <Input placeholder="Enter something..." clearable />
      </div>
    </div>
    <div class="card">
      <h4>输入长度限制</h4>
      <div class="content">
        <Input maxlength="10" show-word-limit placeholder="Enter something..." />
        <Input maxlength="100" show-word-limit type="textarea" placeholder="Enter something..." />
      </div>
    </div>
    <!-- <div class="card">
      <h4>密码框</h4>
      <div class="content">
        <Input type="password" password placeholder="Enter something..." />
      </div>
    </div> -->
    <div class="card">
      <h4>带Icon的输入框</h4>
      <div class="content">
        <Input icon="ios-clock-outline" placeholder="Enter something..." />
      </div>
    </div>
    <div class="card">
      <h4>搜索框</h4>
      <div class="content">
        <Input search placeholder="Enter something..." />
        <Input search enter-button="Search" placeholder="Enter something..." />
      </div>
    </div>
    <div class="card">
      <h4>文本域</h4>
      <div class="content">
        <Input type="textarea" placeholder="Enter something..." />
        <Input type="textarea" :rows="4" placeholder="Enter something..." />
      </div>
    </div>
    <div class="card">
      <h4>适应文本高度的文本域</h4>
      <div class="content">
        <Input type="textarea" :autosize="true" placeholder="Enter something..." />
      </div>
    </div>
    <div class="card">
      <h4>禁用</h4>
      <div class="content">
        <Input disabled placeholder="Enter something..." />
        <Input disabled type="textarea" placeholder="Enter something..." />
      </div>
    </div>
    <!-- <div class="card">
      <h4>无边框</h4>
      <div class="content">
        <Input :border="false" placeholder="Enter something..." />
      </div>
    </div> -->
  </div>
</template>
<script>
import { Input } from '@/components/data'
export default {
  data() {
    return {
      attributes: Input,
    }
  },

  mounted() {
    // 添加拖拽属性
    let nodeArr = document.getElementsByClassName('ivu-input-wrapper')
    for (var i = 0; i < nodeArr.length; i++) {
      nodeArr[i].draggable = true
    }
  },
  methods: {
    // 模拟拖拽组件
    dragStart(e) {
      // 通过attributes上的key去匹配节点上的key
      
      Object.keys(this.attributes).forEach((item) => {
        switch (item) {
          case 'show-word-limit':
            // 重置属性showWordLimit
            let data = e.target.__vue__.showWordLimit
            if (data == 'Search') {
              this.attributes['show-word-limit'].value = 'Search'
            }

            break
          case 'enter-button':
            // 重置属性showWordLimit
            this.attributes['enter-button'].value = e.target.__vue__.enterButton ? 'Search' : ''
            break
          default:
            this.attributes[item].value = e.target.__vue__[item]
            break
        }
      })
      let componentName = 'Input' // 匹配的是dataName，即iview的组件标签
      let info = {
        name: componentName,
        ui: 'iview-UI',
        open: false, // 组件树是否展开
      }
      //通过e.dataTransfer方法来存储被拖拽组件的信息，这样在ondrop的时候可以获取这个组件
      e.dataTransfer.setData('info', JSON.stringify(info))
      
      this.updateAttribute(this.attributes)
    },

    // 延迟更新组件，当组件渲染完成后，我们需要手动给它加上设置的样式
    updateAttribute(attr) {
      setTimeout(() => {
        
        this.$EventBus.$emit('getAttr', attr)
        
      }, 1000)
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  margin: 15px;
  i {
    margin-left: 10px;
  }
  .content {
    padding: 10px;
    margin-left: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 10px 0 #ddd;
  }
  button {
    margin: 5px;
  }
  /deep/.ivu-btn-loading,
  /deep/.ivu-btn.disabled > *,
  /deep/.ivu-btn[disabled] > * {
    // 值为none表示：元素不对指针事件做出反应。
    pointer-events: initial;
  }
  /deep/.ivu-row {
    background: rgba(0, 153, 229, 0.7);
  }
}
</style>
